<template>
    <div id="homefotter">
        <div :class="isShow == 0 ? 'buttons' : 'buttons1'" @click="acc(0)">
            <span class="iconfont icon-shouye"></span>
            <span class="text">首页</span>
        </div>
        <div :class="isShow == 1 ? 'buttons' : 'buttons1'" @click="acc(1)">
            <span class="iconfont icon-dingdan"></span>
            <span class="text">订单</span>
        </div>
        <div :class="isShow == 2 ? 'buttons' : 'buttons1'" @click="acc(2)">
            <span class="iconfont icon-kexuanzuobiankuang"></span>
            <span class="text">座位</span>
        </div>
        <div :class="isShow == 3 ? 'buttons' : 'buttons1'" @click="acc(3)">
            <span class="iconfont icon-gengduo"></span>
            <span class="text" >更多</span>
        </div>
    </div>
    <div id="homefotter1" @click="router.push('/createOrder')">
        <div id="box-eat">
            <span class="iconfont icon-wanju"></span>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import {useRouter} from 'vue-router'
let isShow = ref(0);
let router=useRouter()
let acc=(i:any)=>{

    isShow.value = i;
    if(i==0){
        router.push('/home')
    }else if(i==1){
        
    }else if(i==2){
        router.push('/seat/content1')
    }else if(i==3){
        router.push('/more')
    }

    
}
</script>
<style lang="less" scoped>
#homefotter {
    width: 100%;
    height: 7vh;
    background-color: #FFF;
    position: fixed;
    bottom: 0;
    box-shadow: 0px 20px 10px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 10000;

    .buttons {
        width: 21%;
        height: 85%;
        background-color: #F0F8FF;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5%;

        .text {
            margin-left: 5%;
            box-sizing: border-box;
        }
    }

    .buttons1 {
        width: 21%;
        height: 85%;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;

        .text {
            margin-left: 5%;
            box-sizing: border-box;
        }
    }
}
#homefotter1{
    width: 100%;
    display: flex;
    justify-content: center;
    #box-eat {
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #025CCA;
    z-index: 10000;
    ;
    position: fixed;
    bottom: 2vh;

    .iconfont {
        color: #fff;
        font-size: 5vh;
    }
}
}

</style>